<!-- 领取优惠券 -->
<template>
	<view class="receivecoupons">
		<u-tabs class="u-tabs" :list="list" :is-scroll="false" :current="current" @change="change" bar-width="80"
			active-color="#EC5F2F">
		</u-tabs>
		<view @click="getreceivecouponsdetails(item.id)" v-for="(item,index) in cardList" :key="item.id"
			class="img-item" style="margin-top: 100rpx;">
			<view class="img-btn-tit">
				<image :src="item.coupon_img_1" mode="scaleToFill"></image>
			</view>
			<view class="middle-text">
				<text>{{item.name}}</text>
				<view class="r-text">
					<text>￥</text>
					<text>{{item.price}}</text>
				</view>
			</view>
			<view class="middle2-text">
				<text>有效期：{{item.start_time}}-{{item.end_time}}</text>
			</view>
			<view class="footer-text">
				<view class="bottom-text">
					<text>购买</text>
					<text>{{item.total_num}}</text>
				</view>
				<view class="bottom-text">
					<text>已领取</text>
					<text>{{item.receive_num}}</text>
				</view>
				<view class="bottom-text">
					<text>已使用</text>
					<text>{{item.off_num}}</text>
				</view>
				<image v-show="item.ygqShow" src="../../../static/images/yiguoqi.png" mode="aspectFit"></image>
				<image v-show="item.yxjShow" src="../../../static/images/yixiajia.png" mode="aspectFit"></image>
			</view>
		</view>
		<p>没有更多优惠券了</p>
	</view>
</template>

<script>
	import {
		shareMixins
	} from '../../../mixins/share.js'
	export default {
		mixins: [shareMixins],
		data() {
			return {
				shareData: {
					title: '空港卡券联盟商户端',
					path: '/pages/mine/mine' // 分享的页面路径
				},
				list: [{
						name: '全部'
					},
					{
						name: '可使用'
					},
					{
						name: '已过期',
					},
				],
				current: 0,
				pindex: 1,
				type: 'all',
				cardList: [],
				ygqShow: false,
				yxjShow: false
			}
		},
		onLoad() {
			this.getCouponCenterList()
		},
		onReachBottom() {
			this.pindex++
			this.getCouponCenterList()
		},
		methods: {
			async getCouponCenterList() { //获取卡券中心列表
				var data = {
					pindex: this.pindex,
					psize: 3,
					type: this.type
				}
				const res = await this.$myRequest({
					url: '/api/businessCoupon/getCouponCenterList' + this.$u.queryParams(data)
				}).then((res) => {
					// this.cardList = res.data.data.data
					this.cardList = [...this.cardList, ...res.data.data.data]
					// console.log(this.cardList)
					this.cardList.forEach((i) => {
						let mytime = i.end_time
						let dateTmp = mytime.replace(/-/g, '/') //为了兼容IOS，需先将字符串转换为'2018/9/11 9:11:23'
						let timestamp = Date.parse(dateTmp) //返回'2018-9-12 9:11:23'的时间戳
						let newDate = new Date().getTime() //当前时间
						let ifdate = timestamp - newDate //时间差值
						if(ifdate < 0){
							i.ygqShow = true
						}else{
							i.ygqShow = false
						}
					})
				})
			},
			getreceivecouponsdetails(id) {
				uni.navigateTo({ //跳转领取优惠券详情
					url: '../receivecouponsdetails/receivecouponsdetails?id=' + id
				})
			},
			change(index) { //tabs切换下标
				this.current = index;
				switch (index) {
					case 0:
						this.pindex = 1
						this.type = 'all'
						this.cardList = []
						this.getCouponCenterList()
						break;
					case 1:
						this.pindex = 1
						this.type = 'normal'
						this.cardList = []
						this.getCouponCenterList()
						break;
					case 2:
						this.pindex = 1
						this.type = 'overdue'
						this.cardList = []
						this.getCouponCenterList()
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receivecoupons {
		// padding: 0 32rpx 76rpx 32rpx;
		padding: 0 0 76rpx 0;

		.u-tabs {
			position: fixed;
			top: 0;
			width: 100%;
			height: auto;
			z-index: 999;
		}

		.img-item {
			width: 84%;
			margin: auto;
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
			border-radius: 20rpx;

			.img-btn-tit {
				position: relative;

				image {
					width: 100%;
					height: 235rpx;
				}
			}

			.middle-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 2rpx 24rpx;

				text {
					font-size: 40rpx;
					color: #3C3C3C;
					font-weight: bold;
				}

				.r-text {
					display: flex;
					align-items: center;

					text:nth-child(1) {
						font-size: 32rpx;
						color: #EC5F2F;
					}

					text:nth-child(2) {
						font-size: 52rpx;
						color: #EC5F2F;
					}
				}
			}

			.middle2-text {
				text {
					padding-left: 24rpx;
					font-size: 24rpx;
					color: #8B8B8B;
				}
			}

			.footer-text {
				position: relative;
				padding: 34rpx 0 30rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 85%;

				image {
					position: absolute;
					bottom: 0;
					right: -96rpx;
					width: 90rpx;
					height: 90rpx;
				}

				.bottom-text {
					text:nth-child(1) {
						font-size: 28rpx;
						color: #3C3C3C;
						padding-top: 0;
						margin-top: 0;
						margin-right: 12rpx;
					}

					text:nth-child(2) {
						color: #EC5F2F;
					}
				}
			}

			.r-state {
				position: relative;

				image {
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}

		// view:nth-child(1) {
		// 	margin-top: 40rpx;
		// }

		p {
			font-size: 24rpx;
			color: #8B8B8B;
			margin-top: 76rpx;
			text-align: center;
		}
	}
</style>
